<template>
  <div class="chat">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="小智同学"
      left-arrow
      @click-left="onClickLeft"
    ></van-nav-bar>
    <!-- 聊天内容 -->
    <div class="content" ref="chat">
      <!-- 系统聊天 -->
      <div
        class="robots"
        :class="{ user: item.isme }"
        v-for="(item, index) in chatList"
        :key="index"
      >
        <van-image
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
          width="40px"
          height="40px"
          round
          fit="cover"
          class="myimg"
        ></van-image>
        <div class="text">{{ item.text }}</div>
      </div>
      <!-- 用户聊天 -->
      <!-- <div class="user">
        <van-image
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
          width="40px"
          height="40px"
          round
          fit="cover"
          class="myimg"
        ></van-image>
        <div class="text">life is so nice!</div>
      </div> -->
    </div>
    <div class="bottom">
      <van-search
        show-action
        v-model="value"
        placeholder="说点啥吧"
        left-icon=""
        @search="submit"
        autofocus
      >
        <template #action>
          <div @click="submit">提交</div>
        </template>
      </van-search>
    </div>
  </div>
</template>

<script>
// 导入io
import io from 'socket.io-client'

export default {
  data () {
    return {
      value: '',
      chatList: [{ isme: false, text: '你好呀！' }],
      // 定义一个socket对象供页面使用
      socket: null
    }
  },
  created () {
    // 建立服务的链接
    this.socket = io('http://toutiao.itheima.net', {
      query: {
        token: this.$store.state.token.token
      },
      transports: ['websocket']
    })
    // 接收返回的数据
    this.socket.on('message', (data) => {
      console.log(data.msg)
      // 将返回的数据添加到list列表中
      console.log(this)
      console.log(this.chatList)
      this.chatList.push({
        isme: false,
        text: data.msg
      })
    })
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    },
    submit () {
      // 点击提交按钮，将输入的内容的提交到list列表
      // 非空判断
      if (!this.value.trim()) {
        return
      }
      this.chatList.push({
        isme: true,
        text: this.value
      })
      // 将内容发送到服务器
      this.socket.emit('message', {
        msg: this.value,
        timestamp: Date.now()
      })
      // 清空输入框
      this.value = ''
      // 自动滚动到底部 dom.scrollTop=dom.scrollHight
      // 需要注意的时dom的更新是异步的需要用到$nextTick
      this.$nextTick(() => {
        this.$refs.chat.scrollTop = this.$refs.chat.scrollHeight
      })
    }
  }
}
</script>

<style lang="less">
.chat {
  .content {
    width: 100%;
    position: fixed;
    top: 50px;
    bottom: 60px;
    background-color: #eeeeee;
    font-size: 12px;
    overflow: auto;
    .robots {
       overflow: hidden;
      .myimg {
        float: left;
      }
      .text {
        float: left;
        margin-left: 10px;
        height: 40px;
        background-color: #e0effb;
        line-height: 40px;
        padding: 0 10px;
        border: 1px solid #54a6f7;
      }
    }
    .user {
      margin: 10px 0;

      .text {
        float: right;

        margin-right: 10px;

        background-color: #9eea6a;

        padding: 0 10px;
      }
      .myimg {
        float: right;
      }
    }
  }
  .bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
  }
}
</style>
